<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Source: visualization/models/Button.js</title>
    
    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">
    
    <h1 class="page-title">Source: visualization/models/Button.js</h1>
    
    


    
    <section>
        <article>
            <pre class="prettyprint source"><code>/**
 * @author Russell Toris - rctoris@wpi.edu
 */

/**
 * A button renders a button with text to an internal canvas. The width will scale to fit the text.
 *
 * @constructor
 * @param options - possible keys include:
 *   * text - the text to display on the button
 *   * height - the height of the button
 */
MJPEGCANVAS.Button = function(options) {
  options = options || {};
  this.text = options.text;
  this.height = options.height;

  // used to draw the text internally
  this.canvas = document.createElement('canvas');
  this.redraw();
};

/**
 * Redraw the button to the internal canvas.
 */
MJPEGCANVAS.Button.prototype.redraw = function() {
  var context = this.canvas.getContext('2d');

  // determine text size
  var buttonPadding = this.height * 0.33;
  context.font = (this.height - buttonPadding) + 'px Verdana';
  this.width = context.measureText(this.text).width + buttonPadding * 2;
  this.canvas.width = this.width;
  this.canvas.height = this.height;

  // create the image
  var image = new Image();
  // keep the base64 representation internally
  image.src = '';

  // draw the button
  context.drawImage(image, 0, 0, this.width, this.height);

  // draw the text
  context.font = (this.height - buttonPadding) + 'px Verdana';
  context.fillStyle = '#121212';
  context.fillText(this.text, buttonPadding, this.height - buttonPadding);
};
</code></pre>
        </article>
    </section>




</div>

<nav>
    <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="MJPEGCANVAS.Button.html">Button</a></li><li><a href="MJPEGCANVAS.ErrorIcon.html">ErrorIcon</a></li><li><a href="MJPEGCANVAS.MultiStreamViewer.html">MultiStreamViewer</a></li><li><a href="MJPEGCANVAS.Viewer.html">Viewer</a></li></ul><h3>Global</h3><ul><li><a href="global.html#MJPEGCANVAS">MJPEGCANVAS</a></li></ul>
</nav>

<br clear="both">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.0-dev</a> on Tue Mar 10 2015 09:06:06 GMT-0400 (EDT)
</footer>

<script> prettyPrint(); </script>
</body>
</html>
